/*
* 横向显示（搜索结果）
* */
import Taro, { Component } from '@tarojs/taro'
import {ScrollView, Text, View,Image} from '@tarojs/components'
import './index.scss'
import "../../utils/style";
import {IsNullObject,TenThousandToStr} from "../../utils/utils";
import AppConfig from '../../config/appConfig';
import {GetSwiper} from '../../mode/swiperCtr';
import appStore from "../../store/appStore";
import {getTaoBaoConfig} from "../../mode/homeCtr";

/** props属性
 *    height:高度
 *    ToLowerEvent:底部事件接受
 *    list:数据
 * */

class  Recommend extends Component{
  config = {
    "enablePullDownRefresh": true,
    onReachBottomDistance:50
  }


  state={
    open:appStore.appConfig.open,
    loading: false,
    hasMore:true,
    scrollIndex:0,
    curScrollTop:0 //解决h5 滑动数据回到顶部
  }
  constructor(props) {
    super(props);
  }
  componentWillMount () { }

  componentDidMount () {

  }

  componentWillUnmount () { }

  componentDidShow () {
    if (appStore.appConfig.open < 0){
      getTaoBaoConfig().then(res=>{
        this.setState({
          open:res
        })
      })
    }

  }

  componentDidHide () { }

  ScrollToLower=(e)=>{
    if (!this.state.hasMore || this.state.loading) {
      return
    }
    // console.log(e.detail)
    this.setState({
      loading: true,
      curScrollTop:e.detail.scrollTop
    },()=>{
      const {ToLowerEvent} = this.props
      if (ToLowerEvent !== null){
        ToLowerEvent(this)
      }
    })
  }

  RefData=(hasMore = true)=>{
    this.setState({
      loading: false,
      hasMore: hasMore,
      scrollIndex :process.env.TARO_ENV === 'h5'?this.state.curScrollTop+20:0
    })
  }

  ScrollTop=()=>{
    this.setState({
      curScrollTop:0,
      scrollIndex:this.state.scrollIndex === 0?1:0
    })
  }

  onScroll=(e)=>{
    // console.log(e.detail.scrollTop)
    if (process.env.TARO_ENV === 'h5'){

    }
  }

  //点击进入详情
  onClickSearchItem=(item)=>{
    GetSwiper(item).then(res=>{
      this.enterDetail(res)
    })
  }

  enterDetail=(item)=>{

    Taro.navigateTo({
      url: `/pages/detailPage/detailPage?item=${encodeURIComponent(JSON.stringify(item))}`
      // `/pages/cate-sub/cate-sub?subId=${item.id}&categoryId=${item.superCategoryId}`
    })
  }

  render() {
    let { list,height } = this.props
    if (IsNullObject(list))
      list=[]

    return (
      <View style={{flexDirection:'column'}}>
        <View className={'recommend_list'}>
          <ScrollView
            scrollY
            style={{flex: 1,height:height}}
            onScrollToLower={this.ScrollToLower}
            lowerThreshold={"60px"}
            scrollTop={this.state.scrollIndex}
            onScroll={this.onScroll}
          >
            {
              list.map((item,index)=>{
                return(
                  <View key={index}  className={'recommend_item_'}>
                    <View className={'recommend_item'} onClick={()=>{
                      this.onClickSearchItem(item)
                    }}>

                      <View className={'icon_contain'}>
                        <Image className={'icon'} src={item.Pic}></Image>
                      </View>
                      <View className={'text_contain'}>
                        <View className={'text-1'}>
                          <Text style={{
                            display: '-webkit-box',
                            overflow: 'hidden',
                            '-webkit-line-clamp': 2,
                            '-webkit-box-orient': 'vertical',
                            color: '#121212',
                            textOverflow:"ellipsis",
                            fontSize:16,
                            width: "100%",
                            wordBreak:"break-word"
                          }}>
                            {/*精品*/}
                            <Text className={'text-1-jingping'}>精品</Text>
                            {/*<Text className={'text-1-From'}>*/}
                                {/*{*/}
                                  {/*AppConfig.GetTypeStr(item.TypeFrom)*/}
                                {/*}*/}
                            {/*</Text>*/}
                            {item.Title ? item.Title:item.ShortTitle}
                          </Text>

                        </View>


                        <View className={'text-2'}>
                          <Text style={{
                            display: '-webkit-box',
                            overflow: 'hidden',
                            '-webkit-line-clamp': 2,
                            '-webkit-box-orient': 'vertical',
                            textOverflow:"ellipsis",
                            wordBreak:"break-word"
                          }} className={'text-2-contain'}>{item.Desc?item.Desc : item.ShortTitle}</Text>
                          <Text className={'text-2-sell'}>月销:{TenThousandToStr(item.SaleCount)}</Text>
                        </View>
                        <View className={'text-3'}>
                            <Text className={'text-3-juanhou'}>


                              {/*{item.frist_order > 0 ? "卷+礼金后￥" : "卷后￥"  }*/}

                              <Text className={'text-3-juanhou-price'}>{item.EndPrice}</Text>
                              <Text className={'text-3-juanhou-truePrice'}>
                                ￥{item.Price}
                              </Text>

                            </Text>
                            {
                              this.state.open >=1?(
                                item.frist_order >0 ?(
                                  <View className={'text-3-curPrice2'}>
                                    <Text className={'text-3-curPrice2-price'}>优惠券￥{item.CouponMoney} 礼金￥{item.frist_order}</Text>
                                  </View>):(
                                  <View className={'text-3-curPrice'}>
                                    <Text className={'text-3-curPrice-price'}>优惠券￥{item.CouponMoney}</Text>
                                  </View>
                                )
                              ):<View/>


                            }

                        </View>

                      </View>

                    </View>
                    <View className={'whiteLine'} >
                      <View className={'whiteLine-line'} />
                    </View>
                  </View>

                );
              })
            }
            {this.state.loading &&
            <View className='home__loading'>
              <Text className='home__loading-txt'>正在加载中...</Text>
            </View>
            }
            {!this.state.hasMore &&
            <View className='home__loading home__loading--not-more'>
              <Text className='home__loading-txt'>更多内容，敬请期待</Text>
            </View>
            }
          </ScrollView>
        </View>

      </View>

    );
  }

}

export default  Recommend;
